<template>
	<view class="page__bd demo-panel">
		<view class="hb-bar">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				基础用法
			</view>
		</view>
		<hb-panel title="标题" status="状态" class="margin-top">
			<view>内容</view>
		</hb-panel>

		<view class="hb-bar margin-top">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				高级用法
			</view>
		</view>
		<hb-panel title="标题"  smBorder use-footer-slot avatar avatarRound avatarSrc="https://img.18183.com/uploads/allimg/181114/216-1Q114163524.jpg"
		 status="状态">
			<view>内容</view>
			<view slot="footer" class="text-right">
				<button class="hb-btn hb-btn_primary">按钮</button>
				<button class="hb-btn hb-btn_warning">按钮</button>
			</view>
		</hb-panel>

		<view class="hb-bar margin-top">
			<view class="action">
				<text class="hb-icon_title text-blue"></text>
				卡片面板
			</view>
		</view>
		<hb-panel title="标题" fullScreen  useFooterSlot avatar smBorder avatarSrc="https://img.18183.com/uploads/allimg/181114/216-1Q114163524.jpg"
		 status="状态">
			<view>内容</view>
			<view slot="footer" class="text-right">
				<button class="hb-btn hb-btn_primary">按钮</button>
				<button class="hb-btn hb-btn_warning">按钮</button>
			</view>
		</hb-panel>
	</view>
</template>

<script>
	import hbPanel from '@/components/hb-panel/index';
	export default {
		components: {
			hbPanel
		},
		data() {
			return {

			}
		}
	}
</script>

<style lang="less">
	.demo-panel .hb-panel__footer .hb-btn {
		margin-left: 10upx
	}
</style>
